<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
      }
      img {
        display: block;
      }
      a {
        color: inherit;
      }
      ul {
        display: flex;
        width: 800px;
        height: 200px;
        position: relative;
        margin: 100px auto 0;
      }
      .ele {
        flex: 1;
        border: 1px solid black;
        background-color: orange;
        height: 98px;
        line-height: 98px;
        text-align: center;
      }
      .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 98px;
        opacity: 0.4;
        background-color: deeppink;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="ele">cst</li>
      <li class="ele">cg</li>
      <li class="ele">dg</li>
      <li class="ele">dcg</li>
      <li class="bg"></li>
    </ul>
    <script>
      const ulEl = document.querySelector("ul");
      const eleEls = document.querySelectorAll(".ele");
      const bgEl = document.querySelector(".bg");

      for (let i = 0; i < eleEls.length; i++) {
        eleEls[i].onmouseenter = function () {
          startMove(bgEl, this.offsetLeft);
        };
      }

      function startMove(domEl, target) {
        clearInterval(domEl.timer);

        let a = 3;
        let iSpeed = 0;
        const u = 0.8;
        domEl.timer = setInterval(() => {
          a = (target - domEl.offsetLeft) / 5;
          iSpeed += a;
          iSpeed *= u;
          if (Math.abs(iSpeed) < 1 && Math.abs(target - domEl.offsetLeft) < 1) {
            clearInterval(domEl.timer);
            domEl.style.left = target + "px";
          } else {
            domEl.style.left = domEl.offsetLeft + iSpeed + "px";
          }
        });
      }
    </script>
  </body>
</html>
